<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Spinning Icons</title>
</head>
<body>
<style>
  #followIcons a {
    display: inline-block;
    width: 48px;
    height: 48px;
    text-indent: -3000px;
    background-position: 0 0;
    background-repeat: no-repeat;
    overflow: hidden;
    position: absolute;

    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
  }

  #iconTwitter { background-image:url(http://davidwalsh.name/wp-content/themes/2k11/images/icons/twitter.png); }
  #iconGitHub { background-image:url(http://davidwalsh.name/wp-content/themes/2k11/images/icons/github.png); }
  #iconDelicious { background-image:url(http://davidwalsh.name/wp-content/themes/2k11/images/icons/delicious.png); }
  #iconFacebook { background-image:url(http://davidwalsh.name/wp-content/themes/2k11/images/icons/facebook.png); }
  #iconLinkedIn { background-image:url(http://davidwalsh.name/wp-content/themes/2k11/images/icons/linkedin.png); }
  #iconSkype { background-image:url(http://davidwalsh.name/wp-content/themes/2k11/images/icons/skype.png); }
  #iconMail { background-image:url(http://davidwalsh.name/wp-content/themes/2k11/images/icons/mail.png); }
  #iconForge { background-image:url(http://davidwalsh.name/wp-content/themes/2k11/images/icons/steam.png); }

  p, li { font: 14px Tahoma, sans-serif; }
</style>
<p>
  Hover over the icons below to see them animate and fade! Wonderful!<br />
  Use Chrome to get the best effect!
</p>
<div style="margin:80px 80px 120px; position:relative; background:url(loading.gif) no-repeat; height: 40px">
  <div id="followIcons" style="display:none">
    <a href="http://twitter.com/davidwalshblog" id="iconTwitter">@davidwalshblog Twitter</a>
    <a href="http://github.com/darkwing" id="iconGitHub">@davidwalshblog Twitter</a>
    <a href="http://del.icio.us/dwizzlestar" id="iconDelicious">dwizzlestar de.licio.us</a>
    <a href="http://facebook.com/davidwalsh83" id="iconFacebook">David Walsh Facebook</a>
    <a href="http://linkedin.com/in/davidjameswalsh" id="iconLinkedIn">David Walsh LinkedIn</a>
    <a href="skype:davidwalsh83?chat" id="iconSkype">David Walsh Skype</a>
    <a href="mailto:david@davidwalsh.name" id="iconMail">David Walsh Email</a>
    <a href="http://mootools.net/forge/profile/davidwalsh" id="iconForge">David Walsh MooTools Forge</a>
  </div>
</div>

<p>References:</p>
<ol>
  <li><a href="http://davidwalsh.name/fade-spin-css3-jquery">Create Spinning,
    Fading Icons with CSS3 and jQuery</a></li>
</ol>

<script src="../../../dist/sea.js" data-main="./init"></script>
</body>
</html>